<template>
  <div class="main">
    <div class="left">
      <h3 class="main_header">专题名称</h3>
      <ul style="margin-bottom: 1.25rem">
        <li
          v-for="(item, index) in centerlist"
          :key="item.value"
          @click="pages(index-1)"
        >
          {{ index + 1 }}:{{ item.label }}
        </li>
      </ul>
    </div>
    <div class="right" id="liebiao">
      <div
        class="bossbox"
        v-for="(Item, index) in centerlist"
        :key="'lb' + index"
		:id="'lb' + index"
      >
        <div class="bossbox_main">
          <div class="bossbox_header">{{ Item.label }}</div>
          <div class="bossbox_xuan">
            <i
              :class="
                javaEEquanxuanbtn[index]
                  ? 'fa fa-check-square-o '
                  : 'fa fa-square-o'
              "
              @click="setjaveEEquanxuanBtn(index, Item.children.length)"
            ></i>
            全选
          </div>
        </div>

        <div class="bossbox_content">
          <button
            class="setBtnsty"
            v-for="(k, ind) in Item.children"
            :key="ind"
            :class="k.isClick == true ? 'active' : ''"
            @click="sel(ind, k, index)"
          >
            &nbsp;&nbsp;&nbsp;{{ k.label }}&nbsp;&nbsp;&nbsp;
          </button>
        </div>
      </div>
    </div>
    <div
      class="bottom-checked"
      v-show="selarr.length != 0"
      @mouseenter="enter"
      @mouseleave="leave"
    >
      <div class="bottom-content">
        <div class="checked-top-list">
          <div class="checked-list">
            <dl>
              <dt>已选：</dt>
              <dd>
                <p>
                  <em>{{ optionss.join(",") }}</em>
                  <span> | </span>
                  {{ paper.title }}
                  <span> | </span>
                  {{ paper.num }}
                  <span> | </span>
                  {{ paper.type }}
                </p>
              </dd>
            </dl>
          </div>
          <div class="checked-btn">
            <a href="javascript:;" class="select1" @click="NewChange()"
              >重新选择</a
            >
            <a href="javascript:;" class="select2" @click="paperGenerator()"
              >开始训练</a
            >
          </div>
        </div>
        <div class="checked-bottom-list" v-show="isMouse">
          <dl>
            <dt>试卷难度：</dt>
            <dd
              v-for="(k, index) in paper.titleList"
              :key="index"
              :class="{ 'select-active': index == current.tcurrent }"
              @click="titleclick(index, k)"
            >
              <span>{{ k }}</span>
            </dd>
          </dl>
          <dl class="quantity_dl">
            <dt>题目数量：</dt>
            <dd
              v-for="(k, index) in paper.numList"
              :key="index"
              :class="{ 'select-active': index == current.ncurrent }"
              @click="numclick(index, k)"
            >
              <span>{{ k }}</span>
            </dd>
          </dl>
          <dl>
            <dt>题目构成：</dt>
            <dd
              v-for="(k, index) in paper.typeList"
              :key="index"
              :class="{ 'select-active': index == current.ycurrent }"
              @click="typeclick(index, k)"
            >
              <span>{{ k }}</span>
            </dd>
          </dl>
          <span class="tit">数量不足时填充其他题目</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { HttpManager } from "../request/Special.js";
export default {
  data() {
    return {
      //专项的列表
      centerlist: [],
      //选择的内容
      current: {
        tcurrent: 0,
        ncurrent: 0,
        ycurrent: 0,
      },
      options: [],
      optionss: [],
      //底部框的显示隐藏
      isShow: false,
      isMouse: false,
      //选项
      selarr: [], //默认
      //试卷的难度 数量 类型
      paper: {
        title: "一星",
        num: 5,
        type: "新题",
        titleList: ["一星", "两星", "三星", "四星", "五星"],
        numList: [5, 10, 15, 20],
        typeList: ["全部", "新题", "错题", "新题+错题"],
      },
      javaEEquanxuanbtn: [],
      //选中的知识点
      selectIts: [],
      getmu: [],
    };
  },
  computed: {},
  methods: {
    //获取专项信息
    GetSpecial() {
      const loading = this.$loading({
        lock: true,
        text: "正在加载...",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      HttpManager.getSecKnowledgeTree({}).then((res) => {
        // console.log(res.data);
        this.centerlist = res.data.data;
		 loading.close();
        //用于判断是否全选
        for (var i = 0; i < this.centerlist.length; i++) {
          this.javaEEquanxuanbtn.push(false);
        }
        //用于判断是否选中
        for (var i = 0; i < this.centerlist.length; i++) {
          for (var j = 0; j < this.centerlist[i].children.length; j++) {
            this.centerlist[i].children[j].isClick = false;
          }
        }
      });
    },
    //点击切换样式
    sel(index, k, item) {
      //选中或者不选中
      if (k.isClick == false) {
        k.isClick = true;
        //存选中的对象
        this.selarr.push(k);
        this.optionss.push(k.label);
      } else {
        k.isClick = false;
        for (let i = 0; i < this.selarr.length; i++) {
          if (
            this.selarr[i].parentId == k.parentId &&
            this.selarr[i].value == k.value
          ) {
            this.selarr.splice(i, 1);
            this.optionss.splice(i, 1);
            break;
          }
        }
      }
      //判断是否全部选中
      const isAll = this.centerlist[item].children.every((i) => i.isClick);
      if (isAll) {
        this.javaEEquanxuanbtn[item] = true;
      } else {
        this.javaEEquanxuanbtn[item] = false;
      }
    },
    titleclick(index, k) {
      this.current.tcurrent = index;
      this.paper.title = k;
    },
    numclick(index, k) {
      this.current.ncurrent = index;
      this.paper.num = k;
    },
    typeclick(index, k) {
      this.current.ycurrent = index;
      this.paper.type = k;
    },
    //鼠标移入移出事件
    enter() {
      this.isMouse = true;
    },
    leave() {
      this.isMouse = false;
    },
    //锚点跳转
    pages(id) {
      console.log(id);
      const ot = document.querySelector("#lb" + id).offsetTop;
      document.querySelector("#liebiao").scrollTop = ot;
    },
    //点击所有的科目
    setjaveEEquanxuanBtn(index, num) {
      if (num == 0) {
        return;
      }
      Vue.set(this.javaEEquanxuanbtn, index, !this.javaEEquanxuanbtn[index]);
      if (this.javaEEquanxuanbtn[index] === false) {
        this.centerlist[index].children.forEach(
          (item) => (item.isClick = false)
        );
      } else {
        this.centerlist[index].children.forEach(
          (item) => (item.isClick = true)
        );
      }
      this.getselect(index, this.javaEEquanxuanbtn[index]);
    },
    //获取选中的知识点
    getselect(index, all) {
      //如果不全选就直接删除this.selarr中的数据
      if (all == false) {
        for (let i = 0; i < this.centerlist[index].children.length; i++) {
          for (let j = 0; j < this.selarr.length; j++) {
            if (
              this.selarr[j].parentId ==
                this.centerlist[index].children[i].parentId &&
              this.selarr[j].value == this.centerlist[index].children[i].value
            ) {
              this.selarr.splice(j, 1);
              this.optionss.splice(j, 1);
              break;
            }
          }
        }
      }
      //如果全选就直接判断是否存在，不存在添加
      if (all == true) {
        if (this.selarr.length == 0) {
          for (let i = 0; i < this.centerlist[index].children.length; i++) {
            this.selarr.push(this.centerlist[index].children[i]);
            this.optionss.push(this.centerlist[index].children[i].label);
          }
        } else {
          let flag = 0;

          for (let i = 0; i < this.centerlist[index].children.length; i++) {
            for (let j = 0; j < this.selarr.length; j++) {
              if (
                this.selarr[j].parentId ==
                  this.centerlist[index].children[i].parentId &&
                this.selarr[j].value == this.centerlist[index].children[i].value
              ) {
                flag = 1;
                break;
              }
            }
            if (flag == 0) {
              this.selarr.push(this.centerlist[index].children[i]);
              this.optionss.push(this.centerlist[index].children[i].label);
            } else {
              flag = 0;
            }
          }
        }
      }
    },
    //智能组卷
    paperGenerator() {
      for (let i = 0; i < this.selarr.length; i++) {
        this.getmu.push(this.selarr[i].value);
      }
      var parmas = {
        difficulty: this.current.tcurrent + 1,
        knowledgePoints: this.getmu,
        onlyError: this.current.ycurrent == 2 ? 1 : 0,
        onlyNew: this.current.ycurrent == 1 ? 1 : 0,
        onlyNewAndError: this.current.ycurrent == 3 ? 1 : 0,
        quantity: {
          fills: 0,
          judge: 0,
          multiple: 0,
          shortAnswer: 0,
          single: 0,
          total: this.paper.numList[this.current.ncurrent],
        },
        scope: 0,
        timeLimit: this.paper.numList[this.current.ncurrent] * 10,
      };
      HttpManager.paperGenerator(parmas).then((e) => {
        console.log(e);
        var k = e.data.data;
        window.localStorage.setItem("testPaperId", k.id);
        this.$router.push("/specialtest");
      });
    },
    //重新选择
    NewChange() {
      for (let i = 0; i < this.centerlist.length; i++) {
        this.centerlist[i].children.forEach((item) => (item.isClick = false));
        this.javaEEquanxuanbtn[i] = false;
      }
      this.selarr.splice(0, this.selarr.length);
      this.optionss.splice(0, this.optionss.length);
    },
  },
  mounted() {},

  created() {
    this.GetSpecial();
  },
};
</script>

<style scoped>
.main {
  margin-left: 4.875rem;
  margin-right: 4.875rem;
  /* overflow: hidden; */
}

/* 左边的盒子 */
.left {
  width: 11.5rem;
  /* position: fixed; */
  /* height: 100vh; */
  top: 20;
  font-size: 0.275rem;
  float: left;
  border-radius: 10px;
  background-color: #03d3bd;
  overflow: scroll;
  overflow-x: hidden;
  height: 37rem;
}

.main_header {
  text-align: center;
  color: #fffec7;
  margin-top: 1.55rem;
  margin-bottom: 0.55rem;
}

.left > ul {
  text-align: left;
  list-style: none;
  color: white;
  margin-left: 1.25rem;
  margin-top: 0.5rem;
}

.left > ul li {
  height: 2rem;
  cursor: pointer;
}

.left > ul li:hover {
  color: #fff88d;
  font-weight: bold;
}

/* 右边的盒子 */
.right {
  margin-left: 12rem;
  height: 37rem;
  margin-bottom: 2.875rem;
  overflow: scroll;
  overflow-x: hidden;
}

.bossbox {
  border-radius: 10px;
  background-color: white;
  margin-top: 1.25rem;
  overflow: hidden;
  min-height: 6.25rem;
}

.bossbox_main {
  margin-left: 2.25rem;
  margin-right: 2.25rem;
  margin-top: 1.25rem;
  position: relative;
}

.bossbox_header {
  display: inline-block;
  font-size: 1.125rem;
  font-weight: 350;
}

.bossbox_xuan {
  display: inline-block;
  position: absolute;
  right: 0;
}

.bossbox_content {
  width: 90%;
  margin-left: 5%;
  margin-right: 5%;
  margin-top: 1.25rem;
}

.setBtnsty {
  outline: none;
  /* width: 125px; */
  height: 40px;
  line-height: 2.5rem;
  text-align: center;
  margin-bottom: 3rem;
  margin-left: 2.5rem;
  border-radius: 10px;
  background-color: rgba(0, 0, 0, 0);
  border: 1px solid #ededed;
}

.setBtnsty:hover {
  cursor: pointer;
}

.bottom-checked {
  width: 100%;
  /* box-shadow: 0 0 20px rgba(215,215,215,.5); */
  background-color: white;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 10px 0 0;
  z-index: 9;
  cursor: pointer;
}

.bottom-checked .bottom-content {
  width: 90%;
  margin: 0 auto;
}

.bottom-checked .bottom-content .checked-top-list {
  padding-bottom: 10px;
  display: flex;
  justify-content: space-between;
}

.checked-top-list .checked-list {
  width: 60%;
  padding: 10px 0;
}

.checked-top-list .checked-list dl {
  display: flex;
  justify-content: flex-start;
  height: 35px;
}

.checked-top-list .checked-list dl dt {
  width: 55px;
  height: 35px;
  line-height: 35px;
}

.checked-top-list .checked-list dl dd {
  width: 600px;
}

.checked-top-list .checked-list dl dd p {
  height: 35px;
  line-height: 35px;
  color: #666;
}

.checked-top-list .checked-list dl dd em {
  max-width: 70%;
  display: block;
  float: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.checked-top-list .checked-list dl dd span {
  margin-left: 3px;
  margin-right: 3px;
  font-size: 16px;
}

.checked-top-list .checked-btn {
  width: 40%;
  display: flex;
  justify-content: flex-end;
}

.checked-top-list .checked-btn a {
  display: inline-block;
  border: 1px solid #ededed;
  border-radius: 8px;
  text-align: center;
  margin-right: 18px;
  width: 200px;
  height: 50px;
  line-height: 50px;
  font-size: 16px;
  text-decoration: none;
}

.checked-top-list .checked-btn a.select1 {
  display: inline-block;
  border-color: #00b8a6;
  color: #666;
  cursor: pointer;
}

.checked-top-list .checked-btn a.select2 {
  border-color: #00b8a6;
  background-color: #00b8a6;
  color: #ededed;
  cursor: pointer;
}

.active {
  background-color: #ff8c25;
  color: white;
}

.bottom-checked .bottom-content .checked-bottom-list {
  padding-bottom: 10px;
  padding: 20px 5px 0;
  border-top: 1px solid #f5f5f5;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  font-size: 14px;
}

.bottom-checked .bottom-content .checked-bottom-list dl {
  min-width: auto;
  margin-right: 15px;
  display: inline-block;
  margin-bottom: 20px;
}

.bottom-checked .bottom-content .checked-bottom-list dl dt {
  display: inline-block;
  font-weight: 700;
  color: #333;
}

.bottom-checked .bottom-content .checked-bottom-list dl dd.select-active {
  color: #00b8a6;
  font-weight: 600;
}

.bottom-checked .bottom-content .checked-bottom-list dl dd {
  display: inline-block;
  margin-right: 20px;
  /* display: flex; */
  position: relative;
}

/* .bottom-checked .bottom-content .checked-bottom-list dl dd::before{
		content: '';
		display: inline-block;
		width: 14px;height: 14px;
		margin-right: 2px;
		background-color: #f5f5f5;
		vertical-align: bottom;
	} */
.bottom-checked .bottom-content .checked-bottom-list dl dd i {
  position: absolute;
  left: 0;
  top: -1px;
  color: #00b8a6;
}

.bottom-checked .bottom-content .checked-bottom-list dl dd.select-active i {
  display: block;
}

.tit {
  color: #c7c7c7;
  font-size: 12px;
}

/* 设置滚动条的样式 */
::-webkit-scrollbar {
  width: 2px;
}

/* 滚动槽 */
::-webkit-scrollbar-track {
  -webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.3);
  border-radius: 2px;
}

/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.5);
}

::-webkit-scrollbar-thumb:window-inactive {
  background: rgba(236, 246, 255, 0.4);
}
</style>
